<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="shortcut icon" href="favicon.ico">
<link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">

<link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

<link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
<link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
<link href="${ctx!}/assets/css/admin-main.css" rel="stylesheet">
<body>
<div style="display: inline">
    <a href="#" style="display:inline-block;margin-top: 25px;margin-left: 100px;" class="a_add" id="add_box"
       onclick="addOrEdit();">添加</a>
</div>
<div class="wrapper wrapper-content  animated fadeInRight">
    <table id="table_list" class="table_style table-striped" style="margin: 0 auto">
    </table>
</div>
</body>
<script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>
<script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>
<script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>
<script>
    $(function () {
        initTable();
    });

    function addOrEdit(sysClassId) {
        if (null == sysClassId) {
            title = "添加系统分类"
            url = '${ctx!}/admin/project/sysclass/add_edit/${projectId}'
        } else {
            title = "编辑系统分类"
            url = '${ctx!}/admin/project/sysclass/add_edit/${projectId}?sysClassId=' + sysClassId
        }
        layer.open({
            type: 2,
            title: title,
            shadeClose: true,
            shade: false,
            area: ['400px', '210px'],
            content: url,
            end: function (index) {
                $('#table_list').bootstrapTable("refresh");
            }
        });
    }

    function deleteSysClassById(sysClassId) {
        $.ajax({
            method: "DELETE",
            url: "${ctx!}/admin/project/sysclass/" + sysClassId,
            success: function (data) {
                data = eval('(' + data + ')')
                layer.msg(data.message)
                $('#table_list').bootstrapTable("refresh");
            }
        })
    }

    function initTable() {
        //初始化表格,动态从服务器加载数据
        $("#table_list").bootstrapTable({
            //使用get请求到服务器获取数据
            method: "GET",
            //必须设置，不然request.getParameter获取不到请求参数
            contentType: "application/x-www-form-urlencoded",
            //获取数据的Servlet地址
            url: "${ctx!}/admin/project/sysclass/list/${projectId}",
            //表格显示条纹
            striped: true,
            //是否启用详情页
            detailView: false,
            sidePagination: "server",
            responseHandler: function (data) {
                if (data.success) {
                    rows = data.data.sysclasses
                    total = data.data.sysclasses.length
                    data = {
                        'rows': rows,
                        'total': total
                    };
                    console.log(data)
                    return data
                } else {
                    layer.msg("加载失败," + data.massage)
                }
            },
            //数据列
            columns: [
                {
                    title: "系统分类名称",
                    field: "className",
                    width: 150,
                }, {
                    title: "操作",
                    field: "empty",
                    width: 350,
                    formatter: function (value, row, index) {
                        var operateHtml = '<button class="btn btn-primary btn-xs" type="button" onclick="addOrEdit(\'' + row.id + '\')"><i class="fa fa-edit"></i>&nbsp;修改</button> &nbsp;';
                        operateHtml = operateHtml + '<button class="btn btn-danger btn-xs" type="button" onclick="deleteSysClassById(\'' + row.id + '\')"><i class="fa fa-remove"></i>&nbsp;删除</button>';
                        return operateHtml;
                    }
                }]
        });
    }
</script>
</html>